<template>
    <div id="app">

        <el-col :span="24" class="header">

            <el-col :span="10" class="logo">

                <br>

            </el-col>

            <el-col :span="10">

                <div class="tools">

                    <i class="fa fa-align-justify"></i>

                </div>

            </el-col>

            <el-menu :default-active="currentTopMenu" class="el-menu-demo" mode="horizontal" @select="handleSelect">

                <el-menu-item index="1">顶栏导航一</el-menu-item>

                <el-menu-item index="2">顶栏导航二</el-menu-item>

                <el-menu-item index="3">顶栏导航三</el-menu-item>

            </el-menu>

            <div class="line"></div>

        </el-col>



        <el-col :span="10">

            <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1" v-show="currentTopMenu == 1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>侧栏导航一</span>
                    </template>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                </el-submenu>
                <el-menu-item index="2" v-show="currentTopMenu == 2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">侧栏导航二</span>
                </el-menu-item>
                <el-menu-item index="3" v-show="currentTopMenu == 3">
                    <i class="el-icon-setting"></i>
                    <span slot="title">侧栏导航三</span>
                </el-menu-item>

            </el-menu>

        </el-col>



    </div>

</template>

<script>
    export default {
        name: "TextLeader",
        data(){
            return{
                currentTopMenu: '1'
            }
        },
        methods:{
            handleSelect(index) {
                this.currentTopMenu = index;
            }
        }
    }
</script>

<style scoped>

</style>